<script setup>
import ip from '@/utils/baseURL.js';

import { ref, computed, onMounted } from 'vue'
import axios from 'axios'

// 状态变量
const activeTab = ref('all')
const selectedYear = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const papers = ref([])
const loading = ref(false)
const allPapers = ref([]) // 存储所有论文数据，用于前端筛选

// 获取论文数据
const fetchPapers = async () => {
    loading.value = true
    try {
        const response = await axios.get(ip + '/inter/achievement/getAchievement')
        if (response.data.code === 200) {
            allPapers.value = response.data.data.records
            applyFilters() // 应用筛选并设置分页
        }
    } catch (error) {
        console.error('获取论文数据失败:', error)
    } finally {
        loading.value = false
    }
}

// 年份选项
const yearOptions = computed(() => {
    const years = new Set(allPapers.value.map(paper => paper.date[0]))
    return Array.from(years).sort((a, b) => b - a)
})

// 添加论文类型计算属性
const paperTypes = computed(() => {
    const types = new Set(allPapers.value.map(paper => paper.type))
    return Array.from(types)
})

// 处理年份清除
const handleYearClear = () => {
    selectedYear.value = null
    applyFilters()
}

// 应用筛选并设置分页数据
const applyFilters = () => {
    let result = [...allPapers.value]

    // 根据类型筛选
    if (activeTab.value !== 'all') {
        result = result.filter(paper => paper.type === activeTab.value)
    }
    
    // 根据年份筛选
    if (selectedYear.value) {
        result = result.filter(paper => paper.date[0] === selectedYear.value)
    }

    // 按日期倒序排序
    result = result.sort((a, b) => {
        // 先比较年
        if (b.date[0] !== a.date[0]) return b.date[0] - a.date[0]
        // 再比较月
        if (b.date[1] !== a.date[1]) return b.date[1] - a.date[1]
        // 最后比较日
        return b.date[2] - a.date[2]
    })

    // 更新总数
    total.value = result.length
    
    // 计算当前页数据
    const startIndex = (currentPage.value - 1) * pageSize.value
    const endIndex = startIndex + pageSize.value
    papers.value = result.slice(startIndex, endIndex)
    
    // 如果当前页没有数据且不是第一页，则回到第一页
    if (papers.value.length === 0 && currentPage.value > 1) {
        currentPage.value = 1
        applyFilters() // 重新应用筛选
    }
}

// 修改筛选论文的逻辑 - 仅用于展示分组
const filteredPapers = computed(() => papers.value)

// 获取排序后的年份列表
const sortedYears = computed(() => {
    const years = new Set(papers.value.map(paper => paper.date[0]))
    return Array.from(years).sort((a, b) => b - a)
})

// 获取指定年份的论文
const getYearPapers = (year) => {
    return papers.value.filter(paper => paper.date[0] === year)
}

// 标签切换处理
const handleTabClick = () => {
    selectedYear.value = null
    currentPage.value = 1
    applyFilters()
}

// 事件处理
const handleSizeChange = (val) => {
    pageSize.value = val
    currentPage.value = 1
    applyFilters()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    applyFilters()
}

// 页面加载时获取数据
onMounted(() => {
    fetchPapers()
})
</script>

<template>
    <div class="papers-container">
        <div class="main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>学术论文</h1>
            </div>

            <!-- 修改论文分类标签和年份筛选的布局 -->
            <div class="filter-section">
                <div class="paper-tabs">
                    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                        <el-tab-pane label="全部论文" name="all"></el-tab-pane>
                        <el-tab-pane 
                            v-for="type in paperTypes" 
                            :key="type" 
                            :label="type" 
                            :name="type"
                        ></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="year-filter">
                    <el-select v-model="selectedYear" placeholder="选择年份" clearable @clear="handleYearClear" @change="applyFilters">
                        <el-option
                            v-for="year in yearOptions"
                            :key="year"
                            :label="`${year}年`"
                            :value="year"
                        />
                    </el-select>
                </div>
            </div>

            <!-- 论文列表 -->
            <div class="paper-list" v-loading="loading">
                <div v-for="year in sortedYears" :key="year" class="year-group">
                    <div class="year-header">{{ year }}年</div>
                    <el-card v-for="paper in getYearPapers(year)" :key="paper.id" class="paper-item">
                        <div class="paper-content">
                            <h3 class="paper-title">{{ paper.achievementName }}</h3>
                            <div class="paper-authors">
                                作者：{{ paper.members }}
                            </div>
                            <div class="paper-info">
                                <el-tag :type="paper.type === 'SCI一区期刊' ? 'danger' : 'success'" size="small">
                                    {{ paper.type }}
                                </el-tag>
                                <span class="impact-factor">影响因子：{{ paper.impactFactor }}</span>
                                <span class="paper-date">发表时间：{{ paper.date.join('-') }}</span>
                            </div>
                            <div class="paper-abstract" v-if="paper.digest">
                                <div class="abstract-title">摘要：</div>
                                <p>{{ paper.digest }}</p>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>

            <!-- 分页器 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :total="total"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
</template>



<style lang="scss" scoped>
.papers-container {
    .main-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px 20px;
    }

    .page-header {
        margin-bottom: 40px;
        text-align: center;

        h1 {
            font-size: 36px;
            color: #333;
            margin: 0;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60px;
                height: 4px;
                background-color: #86B943;
            }
        }
    }

    .filter-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        .paper-tabs {
            flex: 1;
            margin-bottom: 0;
            :deep(.el-tabs__nav-wrap::after) {
                background-color: #ebeef5;
            }

            :deep(.el-tabs__active-bar) {
                background-color: #86B943;
            }

            :deep(.el-tabs__item) {
                color: #666;
                font-size: 16px;

                &.is-active {
                    color: #86B943;
                }

                &:hover {
                    color: #86B943;
                }
            }
        }

        .year-filter {
            width: 180px;
            margin-bottom: 0;
            margin-left: 20px;
        }
    }

    .paper-list {
        .year-group {
            margin-bottom: 40px;

            .year-header {
                font-size: 24px;
                color: #333;
                margin-bottom: 20px;
                padding-left: 15px;
                border-left: 4px solid #86B943;
            }
        }

        .paper-item {
            margin-bottom: 20px;

            .paper-content {
                .paper-title {
                    font-size: 18px;
                    color: #333;
                    margin: 0 0 10px 0;
                    font-weight: bold;
                }

                .paper-authors {
                    color: #666;
                    margin-bottom: 10px;
                    font-size: 14px;
                }

                .paper-info {
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    font-size: 14px;

                    .impact-factor {
                        color: #409EFF;
                        font-weight: 500;
                    }

                    .paper-date {
                        color: #999;
                    }
                }

                .paper-abstract {
                    margin-bottom: 15px;
                    
                    .abstract-title {
                        color: #666;
                        margin-bottom: 5px;
                        font-weight: 500;
                    }

                    p {
                        color: #666;
                        line-height: 1.6;
                        margin: 0;
                        font-size: 14px;
                    }
                }
            }
        }
    }

    .pagination-container {
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }
}

// 响应式布局
@media (max-width: 768px) {
    .page-header {
        h1 {
            font-size: 28px !important;
        }
    }

    .paper-content {
        .paper-title {
            font-size: 16px !important;
        }

        .paper-info {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 8px !important;
        }
    }
}
</style>